<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram Recreation</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="380"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = '#000';
        ctx.lineWidth = 2;
        ctx.font = 'bold 18px sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Center of turntable
        const centerX = 180;
        const centerY = 280;
        const radiusX = 160;
        const radiusY = 40;

        // --- Draw Turntable ---
        ctx.beginPath();
        ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
        ctx.stroke();

        // --- Draw Axis of Rotation ---
        // Bottom solid part
        ctx.beginPath();
        ctx.moveTo(centerX, centerY + radiusY);
        ctx.lineTo(centerX, 360);
        ctx.stroke();
        // Top dashed part is drawn with the dimension line later

        // --- Draw Inclined Plane (Wedge) ---
        const wedgeP1 = { x: 200, y: 200 }; // Top point
        const wedgeP2 = { x: 200, y: 274 }; // Right-angle corner
        const wedgeP3 = { x: 300, y: 285 }; // Outer point on base
        
        ctx.beginPath();
        ctx.moveTo(wedgeP1.x, wedgeP1.y);
        ctx.lineTo(wedgeP2.x, wedgeP2.y);
        ctx.lineTo(wedgeP3.x, wedgeP3.y);
        ctx.closePath();
        ctx.stroke();

        // --- Draw Block ---
        // Define corners of the top face of the block
        const blockC1 = { x: 240, y: 226 };
        const blockC2 = { x: 265, y: 234 };
        const blockC3 = { x: 275, y: 222 };
        const blockC4 = { x: 250, y: 214 };
        
        // Draw top face with a fill to hide the wedge line behind it
        ctx.beginPath();
        ctx.moveTo(blockC1.x, blockC1.y);
        ctx.lineTo(blockC2.x, blockC2.y);
        ctx.lineTo(blockC3.x, blockC3.y);
        ctx.lineTo(blockC4.x, blockC4.y);
        ctx.closePath();
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.stroke();

        // Draw sides to give 3D effect
        const blockHeight = 12;
        ctx.beginPath();
        ctx.moveTo(blockC1.x, blockC1.y);
        ctx.lineTo(blockC1.x, blockC1.y + blockHeight);
        ctx.moveTo(blockC4.x, blockC4.y);
        ctx.lineTo(blockC4.x, blockC4.y + blockHeight);
        ctx.moveTo(blockC3.x, blockC3.y);
        ctx.lineTo(blockC3.x, blockC3.y + blockHeight);
        ctx.stroke();

        // --- Draw Dimension Line for 40 cm ---
        const blockCenterX = (blockC1.x + blockC3.x) / 2;
        const dimY = 160;

        // Dashed lines
        ctx.save();
        ctx.setLineDash([4, 4]);
        ctx.lineWidth = 1.5;
        // Line from block
        ctx.beginPath();
        ctx.moveTo(blockCenterX, 218);
        ctx.lineTo(blockCenterX, dimY);
        ctx.stroke();
        // Line for axis
        ctx.beginPath();
        ctx.moveTo(centerX, 100);
        ctx.lineTo(centerX, dimY);
        ctx.stroke();
        ctx.restore();

        // Horizontal line with arrows
        ctx.beginPath();
        ctx.lineWidth = 1.5;
        ctx.moveTo(centerX, dimY);
        ctx.lineTo(blockCenterX, dimY);
        ctx.stroke();
        // Arrowhead at left
        ctx.beginPath();
        ctx.moveTo(centerX + 6, dimY - 4);
        ctx.lineTo(centerX, dimY);
        ctx.lineTo(centerX + 6, dimY + 4);
        ctx.stroke();
        // Arrowhead at right
        ctx.beginPath();
        ctx.moveTo(blockCenterX - 6, dimY - 4);
        ctx.lineTo(blockCenterX, dimY);
        ctx.lineTo(blockCenterX - 6, dimY + 4);
        ctx.stroke();

        // --- Draw Labels ---
        // 40 cm
        ctx.fillText("40 cm", (centerX + blockCenterX) / 2, dimY - 15);

        // Wedge side lengths
        ctx.fillText("3", wedgeP2.x - 15, (wedgeP1.y + wedgeP2.y) / 2);
        ctx.fillText("4", (wedgeP2.x + wedgeP3.x) / 2, wedgeP3.y + 18);
        ctx.fillText("5", (wedgeP1.x + wedgeP3.x) / 2 + 15, (wedgeP1.y + wedgeP3.y) / 2 + 5);

        // Angular velocity (ω)
        ctx.beginPath();
        ctx.arc(centerX, centerY, 120, 0.1 * Math.PI, 0.25 * Math.PI);
        ctx.stroke();
        // Arrowhead for omega
        const angle = 0.25 * Math.PI;
        const arrowX = centerX + 120 * Math.cos(angle);
        const arrowY = centerY + radiusY * Math.sin(angle);
        ctx.beginPath();
        ctx.moveTo(arrowX - 8, arrowY - 6);
        ctx.lineTo(arrowX, arrowY);
        ctx.lineTo(arrowX - 2, arrowY + 8);
        ctx.stroke();
        
        ctx.fillText("ω", arrowX + 25, arrowY);
        
        // Figure caption
        ctx.font = '16px sans-serif';
        ctx.fillText("Fig. 1.62.", 225, 365);

    </script>
</body>
</html>